


<template>
  <ul class="btn">
      <li v-for="(item,btnindex) in btn" 
      :key="btnindex"
      @click="togglebtn(item,btnindex)"
      :class="{'active':nowIndex===btnindex}"
      >
          {{item.btnName}}
      </li>
  </ul>
</template>
<script>
export default {
  props:['btn','nowIndex','btnindex'],
  methods:{
      togglebtn(btnindex,nowIndex){
          this.$emit('linkbtn',btnindex,nowIndex);
      }
  }
}
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.btn{
    // position: fixed;
    // left: 0;
    // top: px2rem(129);
    width: 161/750*100%;
    li{
        // display: flex;
        // align-items: center;
        width:100%;
        height: px2rem(90);
        border-bottom:1px solid #dddddf;
        text-align: center;
        line-height: px2rem(90);
        font-size: px2rem(28);
        color: #333333;
        &.active{
            background: #f6f6f6;
            color: $basic-color;
        }
    }
}
</style>s
